import React, { useState } from 'react'
import Title from './Title'

function Header() {
    //组件内部变量
    let myIndex = "我的下标"
    let myIndex2 = 2
    //采用官方给的标准来定义组件内部状态
    //数据更新，页面跟着刷新。
    //useState函数定义就是一个独立数据，msg数据的名字，setMsg修改数据方案
    const [msg, setMsg] = useState("这是我的内部状态")
    let [grade, setGrade] = useState(100)
    const [flag, setFlag] = useState(false)
    const [num1, setNum1] = useState(10)
    const [num2, setNum2] = useState(20)
    const [user, setUser] = useState({ id: 1, name: "xiaowang" })
    const [week, setWeek] = useState(["星期一", "星期二"])
    const [tasks, setTasks] = useState([
        { id: 1, task: "吃饭", state: false },
        { id: 2, task: "睡觉", state: true },
        { id: 3, task: "打豆豆", state: false }])

    const [tempData, setTempData] = useState(["吃饭", "睡觉"])
    const [tempData2, setTempData2] = useState([<li>吃饭</li>, <li>睡觉</li>])

    const computed = (val, val2) => {
        return val + val2
    }
    const changeData = ()=>{
        const newArray = tasks.map(item=>{
            return <li>{item.task}</li>
        })
        return newArray
    }

    /**
     * 事件函数
     */
    const checked = () => {
        // myIndex = "广州"
        // myIndex2 = 123
        // console.log(myIndex);
        setMsg("修改成你的吧")
        setGrade("200")
        // grade = 200
    }

    return (
        <div>
            <h2 className='title' index={grade}>{msg}</h2>
            {/* <button onClick={checked}>修改myindex</button>
            <p>{flag==true?"这是副标题":"这是子标题"}</p>
            <p>{num1 + num2}</p>
            <p>{num1 * num2}</p>
            <p>{user.id}</p>
            <p>{user.name}</p>
            <p>{JSON.stringify(user)}</p>
            <p>{week}</p>
            <p>{"[星期一]"}</p>
            <p>{computed(100,150)}</p> */}
            <Title></Title>
            <ul>
                {/* <li>吃饭</li>
                <li>睡觉</li>
                <li>打豆豆</li> */}
                {/* {tempData2} */}
                {tasks.map((item, index) => {
                    return <li index={item.id}>{item.task}</li>
                })}
                {/* {changeData()} */}
            </ul>
            <button className='btn'>全部</button>
            <button>已完成</button>
            <button>未完成</button>
        </div>
    )
}

export default Header